<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { MoreActionsApi } from '@/api/controller';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import xmImage from '@/components/xmImage/index.vue';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false
  })
  interface formQuert {
    notifyid:number | string
    is_all:number
    userids:string
    uploadfile:string
    title:string
    sendtime:string
    send_content:string
    min_damion:number | string
    max_damion:number | string
    send_type:number
    note:string
    img_url:string,
    action_url:string
  }
  let form = reactive({} as formQuert)
  const validatePhone = (rule: any, value: any, callback: any)=>{1
    if(value == '' && !form.uploadfile) {
      callback(new Error('请输入搜索的用户uuid'))
    } else if( value && value.indexOf('，') > -1) {
      callback(new Error('请使用英文逗号分隔用户uuid'))
    } else {
      callback()
    }
  }
  const formRules = {
    userids: [
      { required: true, trigger: "blur", validator:validatePhone },
    ],
    sendtime: [{ required: true, trigger: 'blur', message: '请选择预计发送时间' }],
    send_type: [{ required: true, trigger: 'blur', message: '请选择信息类型' }],
    min_damion: [{ required: true, trigger: 'blur', message: '请输入最小充值钻石' }],
    max_damion: [{ required: true, trigger: 'blur', message: '请输入最大充值钻石' }],
    send_content: [{ required: true, trigger: 'blur', message: '请输入文案内容' }],
    title: [{ required: true, trigger: 'blur', message: '请输入主标题' }],
    img_url: [{ required: true, trigger: 'blur', message: '请上传封面' }],
  }
  const msgType = [
    {key:0,label:'文字信息'},
    {key:1,label:'图文信息'},
  ]
  // const radioPageChange = (e:any=0)=>{
    
  // }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const { notifyid=0, send_type, is_all } = form;
      const object = JSON.parse(JSON.stringify(form))
      // 图文信息
      if(send_type == 0) {
        delete object.title
        delete object.img_url
      }
      // 全员信息
      if(is_all == 1) {
        delete object.userids
        delete object.uploadfile
      }
      const loading = Toastloading()
      MoreActionsApi.insertorupdatenotify(object).then(res=>{
        loading.close()
        notifyid?ToastSuccess('公告修改成功'):ToastSuccess('公告发送成功')
        closeDialog()
        $emit('updateList')
      }).catch(()=>{
        loading.close()
      })
      
    })
  }
  const openDialog = (query:any = {})=> {
    const { id=0, is_all=0,
      userids='',
      uploadfile='',
      send_time:sendtime='', send_type='',
      min_damion='', max_damion='',
      send_content='',
      title='',
      img_url='',
      action_url='',
      note='',
      msgFormType='',
      notify_type=''
    } = query
    if(!notify_type) return ToastWarning('缺少消息类型 notify_type')
    const object:any = {
      is_all,userids,uploadfile,
      sendtime,send_type,min_damion,
      max_damion,send_content,title,
      action_url,note,img_url,notify_type
    }
    if(id) object['notifyid'] = id
    action.disabled = msgFormType?true:false
    Object.assign(form,object)
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width xm-dialog-cont-y"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    width="60%"
    title="消息发送">
      <el-radio-group
      v-if="!action.disabled"
      v-model="form.is_all" class="xm-mb20">
        <el-radio-button :label="0">批量上传</el-radio-button>
        <el-radio-button :label="1">全员消息</el-radio-button>
      </el-radio-group>
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <template v-if="form.is_all == 0">
          <el-form-item :label-width="formLabelWidth" label="用户UUID" prop="userids">
            <el-input
              :disabled="action.disabled"
              v-model="form.userids"
              :autosize="{ minRows: 6, maxRows: 6}"
              type="textarea"
              placeholder="请输入用户UUID英文逗号分割例：888,999"
            />
          </el-form-item>
          <el-form-item v-if="!action.disabled" :label-width="formLabelWidth" label="上传用户UUID">
            <xmUpload
              uploadUrl="/api/file/uploadNew"
              listType="text"
              v-model:file-url="form.uploadfile"/> 
          </el-form-item>
        </template>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="预计发送时间" prop="sendtime">
              <el-date-picker
                :disabled="action.disabled"
                v-model="form.sendtime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择预计发送时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="信息类型" prop="send_type">
              <el-select :disabled="action.disabled" v-model="form.send_type">
                <el-option
                  v-for="item in msgType"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最小充值钻石" prop="min_damion">
              <el-input
                :disabled="action.disabled"
                type="number"
                v-model="form.min_damion"
                placeholder="请输入最小充值钻石" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最大充值钻石" prop="max_damion">
              <el-input
                :disabled="action.disabled"
                v-model="form.max_damion"
                placeholder="请输入最大充值钻石" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="form.send_type == 1" :label-width="formLabelWidth" label="主标题" prop="title">
          <el-input
            class="xm-widthMax"
            :disabled="action.disabled"
            v-model="form.title"
            placeholder="请输入主标题" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="文案" prop="send_content">
          <el-input
            :disabled="action.disabled"
            v-model="form.send_content"
            :autosize="{ minRows: 6, maxRows: 6}"
            type="textarea"
            placeholder="请输入文案内容"
          />
        </el-form-item>
        <el-form-item v-if="form.send_type == 1" :label-width="formLabelWidth" label="封面图片" prop="img_url">
          <xmUpload v-if="!action.disabled" v-model:file-url="form.img_url"/>
          <xmImage
          v-else
          :src="form.img_url"
          :list="[form.img_url]"
          style="width: 50%; height: auto;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="站内跳转链接">
          <el-input
            :disabled="action.disabled"
            v-model="form.action_url"
            placeholder="请输入站内跳转链接"
            class="xm-widthMax" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注" prop="name">
          <el-input
            :disabled="action.disabled"
            v-model="form.note"
            :autosize="{ minRows: 6, maxRows: 6}"
            type="textarea"
            placeholder="请输入备注内容"
          />
        </el-form-item>
      </el-form>

      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>